<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styl.css">
</head>

<body>

    <div class="container  sprgin">
        <select class="sprgin">
            <option value="春" class="sprgin">春</option>
            <option value="夏" class="summer">夏</option>
            <option value="秋" class="autumn">秋</option>
            <option value="冬" class="winter">冬</option>
        </select>
    </div>

    <script>
        let box = document.querySelector('.container');
        console.log(box);
        let ops = document.querySelectorAll('.container select option');
        console.log(ops);
        let sel = document.querySelector('.container select');
        console.log(sel);

        sel.onchange = function () {
            if (this.value === ops[0].value) {
                box.classList.add('sprgin');
                box.classList.remove('summer');
                box.classList.remove('autumn');
                box.classList.remove('winter');
                sel.classList.add('sprgin')
                sel.classList.remove('summer')
                sel.classList.remove('autumn')
                sel.classList.remove('winter')
                console.log('鸟');
            } else if (this.value === ops[1].value) {
                box.classList.add('summer');
                box.classList.remove('sprgin');
                box.classList.remove('autumn');
                box.classList.remove('winter');
                sel.classList.remove('sprgin')
                sel.classList.add('summer')
                sel.classList.remove('autumn')
                sel.classList.remove('winter')
            } else if (this.value === ops[2].value) {
                box.classList.add('autumn');
                box.classList.remove('summer');
                box.classList.remove('sprgin');
                box.classList.remove('winter');
                sel.classList.remove('sprgin')
                sel.classList.remove('summer')
                sel.classList.add('autumn')
                sel.classList.remove('winter')
            } else if (this.value === ops[3].value) {
                box.classList.add('winter');
                box.classList.remove('autumn');
                box.classList.remove('summer');
                box.classList.remove('sprgin');
                sel.classList.remove('sprgin')
                sel.classList.remove('summer')
                sel.classList.remove('autumn')
                sel.classList.add('winter')
            }
        }


    </script>
</body>

</html>